
<template>
  <div class="el-custom-from">
    <el-tabs v-model="activeName" class="node-tabs-kts" v-loading="loading">
      <el-tab-pane name="property">
        <template #label>
          <div>
            <span class="font_16px font_Title">
              <i class="el-icon-edit"></i>
              {{ this.$t("i18n.flow_center_sort_setting") }}
            </span>
          </div>
        </template>
        <div id="From_div_style" :style="autoHeight">
          <el-container>
            <el-main id="el-custom-form-main">
              <div class="flowproperty-container container" :style="contentHeight">
                <el-scrollbar>
                  <draggable
                    :list="flowBenchs"
                    dragable="false"
                    :animation="100"
                    :forceFallback="true"
                    item-key="sequence"
                    @change="onMoveCallback"
                  >
                    <template #item="{ element  }">
                      <div class="flow-workbench-icon-div">
                        <el-tooltip placement="right-start" effect="light">
                          <template #content>
                            <el-tag
                              effect="dark"
                              size="mini"
                              style="margin-left: 5px; margin-top: 5px;"
                            >
                              {{ $t("flowi18n.flow_property_name") }}：
                              {{
                              element.cnName
                              }}
                            </el-tag>
                            <br />
                            <el-tag
                              effect="dark"
                              size="mini"
                              style="margin-left: 5px; margin-top: 5px;"
                            >
                              {{ $t("flowi18n.flow_property_flowenname") }}：
                              {{
                              element.enName
                              }}
                            </el-tag>
                            <br />
                            <el-tag
                              effect="dark"
                              size="mini"
                              style="margin-left: 5px; margin-top: 5px;"
                            >
                              {{ $t("flowi18n.flow_step_property_placeholder") }}：
                              {{
                              element.placeholder
                              }}
                            </el-tag>
                          </template>
                          <el-button
                            type="primary"
                            :style="{'background':element.flowStyle,'border-color':element.flowStyle}"
                          >
                            <svg class="flow-workbench-icon" aria-hidden="true">
                              <use :xlink:href="element.flowIcon" />
                            </svg>
                            <div
                              class="flow-workbench-icon-checked-text"
                            >{{$i18n.locale === "zh-cn" ?element.cnName:element.enName}}</div>
                          </el-button>
                        </el-tooltip>
                      </div>
                    </template>
                  </draggable>
                </el-scrollbar>
              </div>
            </el-main>
          </el-container>
          <el-footer>
            <div class="form_handle-box">
              <el-button
                plain
                type="primary"
                @click="SaveEvent()"
                size="mini"
              >{{ $t("table.Global_Save") }}</el-button>

              <el-button
                plain
                type="danger"
                @click="BackEvent()"
                size="mini"
              >{{ $t("table.Global_Back") }}</el-button>
            </div>
          </el-footer>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
let windowHeight = parseInt(window.innerHeight);
import reqVue from "../../utils/req.vue";
import Draggable from "vuedraggable";
import confVue from "../../utils/conf.vue";
export default {
  data() {
    return {
      contentHeight: {
        height: ""
      },
      autoHeight: {
        height: "",
        width: "97%",
        margin: "11px",
        float: "left"
      },
      activeName: "property",
      flowBenchs: [],
      loading: true,
      apipath: "flowcenter",
      way: confVue.$flowApi
    };
  },
  methods: {
    ///设置窗台的高度
    getHeight() {
      this.autoHeight.height = windowHeight - 60 + "px";
      this.contentHeight.height = windowHeight - 170 + "px";
      this.initWorkBench();
    },
    initWorkBench() {
      reqVue.$Post(null, this.apipath + "/v1.0/flows", this.way).then(
        function(data) {
          if (data.status) {
            if (data.body !== "") this.flowBenchs = data.body;
            this.loading = false;
          } else {
            this.$message.error(data.message);
            this.loading = false;
          }
        }.bind(this)
      );
    },
    datadragEnd(evt) {
      console.log(evt);
    },
    onMoveCallback(val) {
      console.log(val, "move==================");
    },
    SaveEvent() {
      this.loading = true;
      let index = this.flowBenchs.filter(o => o.selected).length;
      if (index > 8) {
        this.loading = false;
        this.$message.error(this.$t("i18n.co_workflow_bench_err"));
      } else {
        this.$confirm(this.$t("i18n.confirm_save"), this.$t("i18n.confirm"), {
          type: "warning"
        }).then(() => {
          reqVue.$Post(this.flowBenchs, this.apipath + "/v1.0/save", this.way).then(
            function(data) {
              if (data.status) {
                this.loading = false;
                this.$emit("SortEvent");
              } else {
                this.loading = false;
                this.$message.error(data.message);
              }
            }.bind(this)
          );
        });
      }
    },
    BackEvent() {
      this.$emit("SortEvent");
    }
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  components: { Draggable }
};
</script>